import React, { useImperativeHandle, useState } from 'react';
import { message, Modal } from 'antd';
import { useRequest } from '@/hooks';
import { fetchRank } from '@/pages/Organization/OrgFlow/services';
import styles from './index.less';

/**
 * 职级描述的 Modal 组件
 * @param
 * @returns {JSX.Element}
 * @constructor
 */
const JobRankModal = React.forwardRef((props, ref) => {
    const [visible, setVisible] = useState(false);
    const [jobRankData, setJobRankData] = useState({});

    const { run: fetchRankRun } = useRequest(param => fetchRank(param), {
        manual: true,
        onSuccess: result => {
            const { code, data, msg } = result;
            if (code === 10000) {
                setVisible(true);
                setJobRankData(data);
            } else {
                message.error(msg);
            }
        }
    });

    const open = rankCode => {
        fetchRankRun(rankCode).then();
    };

    const handlerJobRankCancel = () => {
        setVisible(false);
        setJobRankData({});
    };

    useImperativeHandle(ref, () => ({
        open
    }));

    // render
    return (
        <Modal
            title={`${jobRankData?.rankValue ? jobRankData?.rankValue : ''}职级描述`}
            visible={visible}
            className={styles.clearFooterBorder}
            style={{ fontSize: 12 }}
            okButtonProps={{ style: { display: 'none' } }}
            width={650}
            cancelButtonProps={{ style: { display: 'none' } }}
            onCancel={handlerJobRankCancel}
            onOk={handlerJobRankCancel}
        >
            <div className={styles.jobModalBody}>
                <div
                    // eslint-disable-next-line react/no-danger
                    dangerouslySetInnerHTML={{
                        __html: jobRankData.rankDesc && jobRankData.rankDesc.replace(/(\r\n|\n|\r)/gm, '<br />')
                    }}
                />
            </div>
        </Modal>
    );
});

export default JobRankModal;
